<template>
  <div class="tmp">
    <div class="title">最近一年温度变化</div>
    <div class="select">
      <el-select
        v-model="value"
        :placeholder="monthArr[0]"
        @change="monthChange"
      >
        <el-option
          v-for="item in monthArr"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </div>
    <div class="charts">
      <lineEchart :option="tmpStore" />
    </div>
  </div>
</template>

<script setup>
import lineEchart from "@/components/echart/utils/tmp-line-echart.vue";

import usePublicStore from "@/stores/modules/public";
import useTmpStore from "@/stores/modules/tmp";
import { storeToRefs } from "pinia";
import { computed } from "vue";

const publicStore = usePublicStore();
const { city, code } = storeToRefs(publicStore);

const tmpStore = useTmpStore();

// tmpStore.fetchTmpData("guangzhou", 101280101, "2023", "1");

const value = ref("");
const monthArr = computed(() => {
  const dataArr = [];
  const data = new Date();
  // 第一次进入，自动选上个月
  tmpStore.fetchTmpData(
    city.value,
    code.value,
    data.getFullYear(),
    data.getMonth()
  );
  // data.setMonth(data.getMonth(), 1); //获取到当前月份,设置月份
  for (let i = 0; i < 12; i++) {
    data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1
    let m = data.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    dataArr.push(data.getFullYear() + "-" + m);
  }
  return dataArr;
});

const monthChange = (e) => {
  const date = e.split("-");
  tmpStore.fetchTmpData(city.value, code.value, date[0], date[1]);
};
</script>

<style lang="less" scoped>
.tmp {
  border-radius: 16px;
  background-color: #f7f8f9;
  border: 1px solid #f2f4fa;
  padding: 30px 16px 20px;
  margin-bottom: 16px;
  .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    margin-bottom: 8px;
  }
  .select {
    padding: 0 16px;
    text-align: right;
  }
  .charts {
    margin: 0 auto;
    max-width: 1120px;
  }
}
</style>